<!--
 * @Author: H.
 * @Date: 2021-12-06 18:12:03
 * @LastEditTime: 2021-12-14 09:23:04
 * @Description:
-->
<template>
  <div class="user-info">
    <el-dropdown>
      <span class="el-dropdown-link">
        <img
          src="@/assets/img/1.jpg"
          class="user-avatar"
          width="30"
          height="30"
        />
        <span class="username">{{ name }}</span>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleExitClick" icon="i-circle-close"
            >退出登陆</el-dropdown-item
          >
          <el-dropdown-item icon="i-info-filled">个人信息</el-dropdown-item>
          <el-dropdown-item icon="i-unlock">修改密码</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <div class="operation">
      <span>
        <el-icon><i-bell /></el-icon
      ></span>
      <span>
        <el-icon><i-chat-dot-round /></el-icon
      ></span>
      <span>
        <span class="dot"></span>
        <el-icon><i-postcard /></el-icon>
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from '@/store'
import localCache from '@/utils/cache'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    const store = useStore()
    const router = useRouter()
    const name = store.state.login.userInfo.name
    const handleExitClick = () => {
      localCache.deleteCache('token')
      router.push('/login')
    }
    return {
      name,
      handleExitClick
    }
  }
})
</script>

<style lang="scss" scoped>
.user-info {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  .operation {
    margin-right: 20px;
    span {
      position: relative;
      display: inline-flex;
      width: 40px;
      height: 35px;
      justify-content: center;
      align-items: center;

      &:hover {
        background: #f2f2f2;
      }

      i {
        font-size: 20px;
      }

      .dot {
        position: absolute;
        top: 3px;
        right: 3px;
        z-index: 10;
        width: 6px;
        height: 6px;
        background: red;
        border-radius: 100%;
      }
    }
  }
}
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
  .username {
    padding: 0 8px;
  }
  .user-avatar {
    border-radius: 50%;
  }
}
</style>
